<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <input id="inp" type="password">
    <input id="btn" type="submit" value="显示输入的内容">
    <input type="text" id="inp2">

    <script>

        // 1 找到相关的对象
        //    document.getElementById()

        // 2 处理相关的事件
        //   obj.onclick = function () {
                // 绑定事件以后要做的事情
        //   }

        // 3 获取输入框的值   var res = oInp.value ;

        // 4 给输入框赋值  oInp.value = 666 ;



        // 1 找对象
        // 1.1 找到输入框
        var oInp = document.getElementById('inp');
        // 1.2 测试对象是否找到  --- 对象如果没有成功拿到  null   (没有加引号，id写错了或者id根本没有写)
        console.log(oInp) ;
        // 1.3 找到按钮
        var oBtn = document.getElementById('btn') ;
        // 测试
        console.log(oBtn) ;
        // 1.4 找到显示结果的输入框
        var oRes = document.getElementById('inp2') ;


        // 2 写事件  --- 给谁绑定事件？
        // 绑定事件的语法
        // obj.onclick = function () {}
        // 给按钮绑定
        oBtn.onclick = function () {
            // 2.1 测试事件是否绑定成功
            // alert(666) ;
            // 获取输入框的值
            var res = oInp.value ;
            console.log(res) ;
            // 把输入的结果放在右侧输入框中
            oRes.value = res ;
        }





    </script>
    
</body>
</html>